import _extends from '@babel/runtime/helpers/esm/extends'
import { createNamespace } from '../utils'
import { ChildrenMixin } from '../mixins/relation'

import './style'
var _createNamespace = createNamespace('swipe-item')
var createComponent = _createNamespace[0]
var bem = _createNamespace[1]

export default createComponent({
  mixins: [ChildrenMixin('vanSwipe')],
  data: function data() {
    return {
      offset: 0,
      inited: false,
      mounted: false
    }
  },
  mounted: function mounted() {
    var _this = this

    this.$nextTick(function() {
      _this.mounted = true
    })
  },
  computed: {
    style: function style() {
      var style = {}
      var _this$parent = this.parent
      var size = _this$parent.size
      var vertical = _this$parent.vertical

      if (size) {
        style[vertical ? 'height' : 'width'] = size + 'px'
      }

      if (this.offset) {
        style.transform =
          'translate' + (vertical ? 'Y' : 'X') + '(' + this.offset + 'px)'
      }

      return style
    },
    shouldRender: function shouldRender() {
      var index = this.index
      var inited = this.inited
      var parent = this.parent
      var mounted = this.mounted

      if (!parent.lazyRender || inited) {
        return true
      } // wait for all item to mount, so we can get the exact count

      if (!mounted) {
        return false
      }

      var active = parent.activeIndicator
      var maxActive = parent.count - 1
      var prevActive = active === 0 && parent.loop ? maxActive : active - 1
      var nextActive = active === maxActive && parent.loop ? 0 : active + 1
      var shouldRender =
        index === active || index === prevActive || index === nextActive

      if (shouldRender) {
        this.inited = true
      }

      return shouldRender
    }
  },
  render: function render() {
    var h = arguments[0]
    return h(
      'div',
      {
        class: bem(),
        style: this.style,
        on: _extends({}, this.$listeners)
      },
      [
        this.shouldRender &&
          h(
            'div',
            {
              class: bem('inner')
            },
            [this.slots()]
          )
      ]
    )
  }
})
